<template>
  <view class="login-container">
    <image class="logo" src="/static/images/logo@2x.png" alt />
    <text class="title">蘑菇在线</text>
    <image class="login-tips" src="/static/images/login_tips@2x.png" alt />
    <button open-type="getUserInfo" @getuserinfo="wxLogin" plain class="wx-login-button">
      <image class="wx-login-img" src="/static/images/wx_login@2x.png" alt />
    </button>
    <text @click="phoneLogin" class="phone-login">手机号登录</text>
    <text class="bottom-tip">Copyright © 2019 蘑菇在线</text>
  </view>
</template>

<script>
import request from "../utils/util";

export default {
  methods: {
    wxLogin(e) {
      if (e.target.errMsg === "getUserInfo:fail auth deny") return;
      console.log(e);
      const { nickName: nickname, avatarUrl: avatar } = e.target.userInfo;
      console.log(nickname, avatar);

      uni.login({
        success: async ({ code }) => {
          console.log(code);
          const res = await request({
            url: "user/wxlogin",
            method: "post",
            data: {
              nickname,
              avatar,
              code,
            },
            // tip: "登陆中...",
          });
          console.log(res);

          if (res.data.status == 0) {
            uni.setStorageSync("token", res.data.token);

            uni.showToast({
              title: res.data.message,
              icon: "none",
              duration: 2000,
              success: () => {
                uni.reLaunch({
                  url: "/pages/home/index",
                });
              },
            });
          }
        },
      })
      
    },
    phoneLogin(){
        uni.reLaunch({
           url: '/pages/phone-login/index'
        });
      }
  },

  // methods: {
  //   wxLogin (e) {
  //     if (e.detail.errMsg === 'getUserInfo:fail auth deny') return

  //     // 获取后台所需要的 nickname、avatar
  //     const { nickName: nickname, avatarUrl: avatar } = e.detail.userInfo

  //     uni.login({
  //       success: async ({ code }) => {
  //         // 发送请求，进行微信授权登录
  //         const res = await request({
  //           url: 'user/wxlogin',
  //           method: 'POST',
  //           tip: '登录中...',
  //           data: {
  //             nickname,
  //             avatar,
  //             code
  //           }
  //         })

  //         // 保存token
  //         uni.setStorageSync('token', res.data.token)

  //         // 提示，提示完成之后，跳转
  //         uni.showToast({
  //           title: res.data.message,
  //           duration: 2000,
  //           success: () => {
  //             // 跳转到首页
  //             uni.reLaunch({
  //               url: '/pages/home/index'
  //             })
  //           }
  //         })
  //       }
  //     })
  //   }
  // }
};
</script>

<style lang="less" scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .logo {
    margin-top: 180rpx;
    width: 212rpx;
    height: 212rpx;
  }
  .title {
    color: #333333;
    font-size: 24px;
    margin-top: 20rpx;
  }
  .login-tips {
    margin-top: 30rpx;
    height: 34rpx;
    width: 292rpx;
    position: relative;
  }
  .wx-login-button {
    margin-top: 200rpx;
    width: 568rpx;
    height: 98rpx;
    padding: 0;
    border: none;
  }
  .wx-login-img {
    // margin-top:200rpx;
    width: 568rpx;
    height: 98rpx;
  }
  .phone-login {
    margin-top: 40rpx;
    color: #333333;
    font-size: 15px;
  }
  .bottom-tip {
    color: #a8a8a8;
    font-size: 10px;
    position: absolute;
    bottom: 40rpx;
  }
}
.wx-login-container {
  position: relative;
  .wx-login-tip1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 450rpx;
    padding-top: 50rpx;
    img {
      width: 198rpx;
      height: 198rpx;
    }
    p {
      color: #bebebe;
      margin-top: 50rpx;
      font-size: 13px;
    }
  }
  .wx-login-tip1-cover {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 500rpx;
    background: rgba(0, 0, 0, 1);
    opacity: 0.16;
  }
}
</style>
